{$layout}

<!-- 检测配置更新 -->
<proxy-change-notify-box></proxy-change-notify-box>

{$template "menu"}

<div v-if="clients.length > 0">
	<table class="ui table selectable">
		<thead>
			<tr>
				<th>客户端地址</th>
				<th>服务器端地址</th>
				<th>后端服务器地址</th>
				<th>瞬时写入速度<i class="icon long arrow up small grey"></i></th>
				<th>瞬时读取速度<i class="icon long arrow down small grey"></i></th>
				<th class="two op">操作</th>
			</tr>
		</thead>
		<tr v-for="client in clients">
			<td>{{client.clientAddr}}
				<div>
					<span v-if="client.clientLocation.length > 0" class="ui label tiny">{{client.clientLocation}}</span>
				</div>
			</td>
			<td>{{client.serverAddr}}</td>
			<td>{{client.backendAddr}}</td>
			<td>{{client.writeSpeed}}</td>
			<td>{{client.readSpeed}}</td>
			<td>
				<a href="" title="断开客户端与服务器端之间的连接" @click.prevent="disconnect(client)">断开</a>
			</td>
		</tr>
	</table>

	<p class="comment" style="padding-top:0">每个服务器地址最多只显示前100个连接。</p>
</div>

<div v-if="clients.length == 0 && isLoaded">
	<p class="comment" style="padding-top:0">暂时还没有任何客户端连接。</p>
</div>

